﻿<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta charset="utf-8" />
    <title></title>
    <script src="/Script/torem.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            font-size: .14rem;
            background-color: #f5f5f5;
        }

        .triangle {
            width: 0;
            height: 0;
            border-left: .05rem solid transparent;
            border-right: .05rem solid transparent;
            border-top: .05rem solid #ccc;
            margin-left:.04rem;
        }

        li {
            list-style: none;
        }

        .time {
/*            margin-top:.45rem;*/
            position: fixed;
            top:.45rem;
            height: .5rem;
            width:100vw;
            display: flex;
            align-items: center;
            background-color: #fff;
        }

        .month {
            position: absolute;
            top: 100%;
            width: 100%;
            background: #fff;
            display: none;
            transition: all .5s;
            /*            box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;*/
            box-shadow: rgba(0, 0, 0, 0.15) 0  1.95px 2.6px;
            border-radius: .04rem;
        }

            .month li {
                height: .3rem;
                line-height: .3rem;
                text-align: center;
            }
        .nowMonth{
            display:flex;
            align-items:center;
            padding:.12rem;
        }
        #month{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            padding:.12rem;
        }
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            height: .45rem;
            width: 100vw;
            background-color: #fff;
            z-index: 9999;
            padding: 0 .12rem;
        }

            header > img {
                width: .2rem;
                height: .2rem;
            }
        .orderList{
            padding:.12rem;
            margin-top:1rem;
        }
        .orderList-item {
            background-color: #fff;
            border-radius: .12rem;
            padding: .12rem;
            margin-bottom:.16rem;
        }
            .orderList-item>div{
                height:.3rem;
                line-height:.3rem;
            }
        .text-8c {
            color: #8c8c8c;
        }
            .order-number {
               
            }
            .empty{
                width:100%;
                text-align:center;
                padding-top:1rem;
            }
    </style>
</head>

<body>
    <header>
        <img src="/images/left.png" alt="" onclick="history.go(-1)" />
        <span>订单</span>
        <span></span>
    </header>
    <div class="time">
        <div class="nowMonth">
            <div id="nowMonth">1月</div>
            <div class="triangle"></div>
        </div>
        <div class="month">
            <ul id="month">
                <li>1月份</li>
                <li>2月份</li>
                <li>3月份</li>
                <li>4月份</li>
                <li>5月份</li>
                <li>6月份</li>
                <li>7月份</li>
                <li>8月份</li>
                <li>9月份</li>
                <li>10月份</li>
                <li>11月份</li>
                <li>12月份</li>
            </ul>
        </div>
    </div>
    <div class="orderList">
        <div class="orderList-item">
            <div class="text-8c">订单号:22222222222222222</div>
            <div><span style="font-size:.16rem">早餐</span><span>￥</span><span>2.9</span></div>
            <div class="text-8c" style="font-size:.12rem;">就餐日期: 2024-05-23</div>
        </div>
    </div>
    <script src="/Scripts/jquery-2.1.1.min.js"></script>
    <script>
        var start = null, end = null, isShowMonth = false
        $(document).ready(function () {
            const currentDate = new Date();
            const currentMonth = currentDate.getMonth() + 1;
            getMonthTime(currentMonth);
            $('#month li').on('click', function () {
                const monthText = $(this).text();
                const month = parseInt(monthText.match(/\d+/)[0]);
                getMonthTime(month);
                $(".month").hide()
                console.log(startDate, endDate)
               
            });

            $(".nowMonth").on('click', function () {
                if (isShowMonth) {
                    $(".month").show()
                } else {
                    $(".month").hide()
                }
                isShowMonth = !isShowMonth
               
            })
            function getOrderList() {
                
                $.ajax({
                    type: "post",
                    url: "/MenuReserveHandler.ashx",
                    data: { State: 'all', type: 'list0', start: start, end: end, funcName: 'getOrderList' },
                    success: function (data) {
                        const res = JSON.parse(data)
                        let html = ``
                        $(".orderList").empty()
                        res.forEach(v => {
                            html += ` <div class="orderList-item">
     <div class="text-8c">订单号:${v.OrderId}</div>
     <div><span style="font-size:.16rem">${v.foodName}</span><span>￥</span><span>${v.foodPrice}</span></div>
     <div class="text-8c" style="font-size:.12rem;">就餐日期: ${v.reservationdate}</div>
 </div>`
                        })
                        $(".orderList").html(res.length > 0 ? html : "<div class='empty'>暂无数据</div>")
                        console.log(res)
                    }
                })
            }
            
            function getMonthTime(month) {
                const currentYear = new Date().getFullYear();
                const startDate = new Date(currentYear, month - 1, 1);
                const endDate = new Date(currentYear, month, 0);
                console.log(currentYear, endDate)
                const formatDate = (date, isEnd = false) => {
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    if (isEnd) {
                        return `${year}-${month}-${day}`;
                    }
                    return `${year}-${month}-${day}`;
                };

                start = formatDate(startDate);
                end = formatDate(endDate, true);
                console.log("start",start)
                getOrderList()
                $('#nowMonth').text(`${new Date(start).getMonth() + 1}月份`);
            }
        });
    </script>
</body>

</html>
